<template>
  <div >
         <div>
            <van-nav-bar
            title="更多电影"
            left-text="返回"
            class="nav_color"
            left-arrow
            @click-left="onClickLeft"
         
          />
         </div>
        
         <div style="padding-top: 50px; padding-bottom: 30px; background-color: #16161A;">
            <div>
                <van-grid :border="false" :column-num="3" class="film_imgs" >
                    <van-grid-item v-for="(film,index) in tuijian" :key="index" class="van-grid-item__content">
                      <router-link :to="'/showFilms/' + film.id">
                        <van-image :src="film.image_url" />
                        <div> {{film.title}} </div>
                      </router-link>
                    </van-grid-item>
                  </van-grid>
            </div>

            <div >
              <button class="btn_more" @click="loadMore">加载更多</button>
            </div>
            
          </div>
  </div>
</template>

<script>
export default {
  name: 'ShowMore',
  data () {
   return {
    tuijian:[],
    getsize: 24, // 默认展示第一页的电影
   }
  },
  mounted() {
    this.initFilms()
    console.log(this.id)
  },
  methods:{
    //加载电影
    loadMore() {
      // 点击按钮，加载更多的电影
      // 当触发这个加载更多方法的时候，应该让 page 页码 + 1 之后，再调用 initFilms 方法
      this.getsize += 18;
      this.initFilms();
      Toast.success('加载成功！');
     
    },
    //根据类型获取电影
    initFilms(){
      const _this = this
      this.axios.get("/reqq/type/findById?typeId="+ this.id +"&page=0&size=" + this.getsize).then(resp=>{
        console.log(resp)
        _this.tuijian = resp.data.data.result
      })
    },
    //返回上一层
    onClickLeft() {
       this.$router.go(-1);
    },
  },
  props:["id"]
}
</script>

<style scoped>
  /* 导航栏 */
  .nav_color{
    z-index: 9; 
    position:fixed; 
    width: 100%; 
    background-color: #16161A;
  }
  /* 更多电影 */
  /deep/ .van-nav-bar__title{
    color: #fff;
  }
  /* 返回 */
  /deep/ .van-nav-bar__text {
    /* color: #fff; */
  }
  /* 字体 */
  .film_imgs .van-grid-item div{
    font-size: 12px;
    text-align: center;
    color: #F6F1E0;
    height: 25px;
  }
  /* 图片 */
     .film_imgs .van-grid-item .van-image{
      width: 94%;
      height: 160px;
        
    }
      /* 卡片 */
   /deep/ .van-image__img  {
       border-radius: 5px;
    }
    /* 卡片背景 */
    /deep/ .van-grid-item__content {    
      /* background-color: #eee; */
      background-color: #16161A;
      padding: 3px 1px;
    }

</style>